<template>
  <canvas class="canvas" ref='canvas'>
    <!-- <div class="gamePlayer"/> -->
  </canvas>
</template>

<script>
export default {
  name:'DestroyThePlanetGame',
  data(){
    return{
      size: 20,
      ctx:null,
      gamerbullOffset: {
        divOffsetHeight: '',
        divOffsetWidth: ''
      }
    }
  },

  mounted(){
    // 初始化画布
    this.initCanvas()
    // 生成玩家
    // this.initPalyer()
    // this.$nextTick(() => {
    //   this.gamerbull()
    //   this.$refs.canvas.addEventListener('click', this.firebullet)
    // })
  },

  methods:{
    initCanvas(){
      let can = this.$refs.canvas;
      let canHight = can.offsetHeight, canWidth = can.offsetWidth
      this.ctx = can.getContext('2d');
      this.ctx.fillStyle = "FF0000";
      this.ctx.fillRect(0,0, canHight,canWidth);
      this.initPalyer()
    },
    initPalyer(){
      this.ctx.beginPath();
      this.ctx.arc(50, 50, 20, 4,2*Math.PI);
      this.ctx.fillStyle="red";
      this.ctx.fill();
      // this.ctx.stroke();
    },

    gamerbull(){
      const divOffset = document.getElementsByClassName('gamePlayer')[0]
      // this.gamerbullOffset = {
      //   divOffsetHeight: this.$refs.canvas.clientHeight/2,
      //   divOffsetWidth: this.$refs.canvas.clientWidth/2
      // }
      // divOffset.style.transform = `translate(${this.gamerbullOffset.divOffsetWidth}px, ${this.gamerbullOffset.divOffsetHeight}px)`
    },
    /* 点击生成子弹 */
    firebullet(e){
      // /* 子弹位置 */
      // const fireOffset = {
      //   fireOffsetX: e.offsetX,
      //   fireOffsetY: e.offsetY
      // }
      let fire = document.createElement('div')
      fire.classList.add('fire');
      this.$refs.canvas.appendChild(fire);
      /* 渲染子弹 */
      // this.initfirebullet(e)
      /* 子弹轨迹 */
      this.BulleTrajectory(fire, e)
    },

    /* 渲染子弹 */
    initfirebullet(data){
      // let gamePlayer = document.getElementsByClassName('gamePlayer')[0]


      // fire.style.transform = `translate(${this.gamerbullOffset.divOffsetWidth + 10}px, ${this.gamerbullOffset.divOffsetHeight - 30}px)`
      this.$refs.canvas.appendChild(fire);
      /* 子弹发射轨迹 */
      this.BulleTrajectory(fire, data)
    },

    /* 子弹发射轨迹 */
    BulleTrajectory(fire, data){
      // let demo1img = this.$refs.demo1img
        let rect = fire.getBoundingClientRect()
        let center = {
          x: rect.left + (rect.right - rect.left)/2,
          y: rect.top + (rect.bottom - rect.top)/2
        }
        let deg = Math.atan2(center.y - data.pageY, center.x - data.pageX) * (180 / Math.PI);
        let x = center.x + 10 * Math.cos(deg);
        let y = center.y + 10 * Math.sin(deg);

        /* 调用开火 */
        // this.BullFree(data, deg, x, y)
        
        fire.style.transform = `rotate(${deg}deg)`
        fire.style.top = `${x}`
        fire.style.left = `${y}`

        // console.log(center, data, deg)
        requestAnimationFrame(this.BulleTrajectory(fire, data));


      // let Offset = fire.style.transform.split('(')[1]
      // let OffsetX = parseInt(Offset.split(')')[0].split(',')[0])
      // let OffsetY = parseInt(Offset.split(')')[0].split(',')[1])
      // fire.animate([{
      //   // translate(${data.fireOffsetX}px, ${data.fireOffsetY}px)
      //   transform: `translate(${this.gamerbullOffset.divOffsetWidth + 10}px, ${this.gamerbullOffset.divOffsetHeight + 30}px)`
      // },{
      //   transform: `translate(${data.fireOffsetX}px, ${data.fireOffsetY}px)`
      // }],{
      //   duration: 1000
      // })
      // document.getElementsByClassName('fire')[0].remove()
    },

    // BullFree(data, deg){
    //   let x = center.x + 10 * Math.cos(deg);
    //   let y = center.y + 10 * Math.sin(deg);
    // }
  }
}
</script>

<style lang="scss">
.canvas{
  // background-color: #000;
  width: 100%;
  height: 100%;
  // position: relative;
  // .gamePlayer{
  //   width: 40px;
  //   height: 40px;
  //   background: #fff;
  //   border-radius: 50%;
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  // }

  // .fire{
  //   width: 20px;
  //   height: 20px;
  //   border-radius: 50%;
  //   background: blue;
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   transform: translate(-50%, -50%);
  // }
}
</style>